﻿var startingX = null;
var startingY = null;
var offsetX = null;
var offsetY = null;
var dragEl = null;
var hiddenX = null;
var hiddenY = null;

function handleDragStart(ev) {
    //ev.dataTransfer.setData("Text", ev.target.id);
    dragEl = this;
    hiddenX = document.getElementsByName(ev.target.id + 'X')[0];
    hiddenY = document.getElementsByName(ev.target.id + 'Y')[0];
    startingX = ev.clientX;
    startingY = ev.clientY;
    offsetX = $(hiddenX).val();
    offsetY = $(hiddenY).val();
}

function drop(ev) {
    endingX = ev.clientX;
    endingY = ev.clientY;
    ev.preventDefault();
    height = $(dragEl).height();
    newXValue = parseInt(offsetX) + endingX - startingX;
    newYValue = parseInt(offsetY) + endingY - startingY;
    newYValue = (newYValue - (height / 2));
    dragEl.style.left = newXValue + "px";
    dragEl.style.top = newYValue + "px";
    $(hiddenX).val(newXValue);
    $(hiddenY).val(newYValue);    
}

function allowDrop(ev) {
    ev.preventDefault();
}

var posicionamentos = document.querySelectorAll('.div_posicionamento_tatico');
[ ].forEach.call(posicionamentos, function (pos) {
    pos.addEventListener('dragstart', handleDragStart, false);
});